<template>
  <div class="app">
    <div class="login">
      <h3>欢迎使用仓小云</h3>
      <el-input
          class="user"
          placeholder="请输入账号"
          v-model="user"/>
      <el-input
          class="pwd"
          placeholder="请输入密码"
          v-model="password"
          show-password
          type="password"/>
      <el-button type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {isNull} from '@/utils/index'
import {ElMessage} from "element-plus";
import {request} from "@/utils/request.js";
import router from "@/router/index.js";

const user = ref('操作员5')
const password = ref('Jiuxing454@')

const login=async ()=>{
  if(isNull(user.value) || isNull(password.value)){
    ElMessage.error('用户名或密码不为空!')
  }

  const r = await request.get(`/api/tp-login/login?username=${user.value}&password=${password.value}`)
  r.code === 200?(ElMessage.success(`用户${user.value}登陆成功!`),await router.push({name:'index'})):ElMessage.error(r.msg)
}
</script>

<style scoped lang="scss">
.app{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  //border: 1px solid red;
  background: url("@/assets/image/login.jpg");
  background-size: cover;

  .login{
    border: 1px solid white;
    width: 500px;
    height: 400px;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 50px;


    .user{
      //border: 1px solid red;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      margin: 20px 0;
      padding: 0;
      .el-input{
        width: 100%;
        height: 100%;
        margin: 0;
        *{
          width: 100%;
          height: 100%;
        }
      }
    }

    .el-button{
      width: 150px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
      border-radius: 0;
    }
  }
}
</style>